<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="我要买房"
      @click-left="back"
    >
    <template #left>
    <van-icon name="arrow-left" size="16px" color="#333"/>
  </template>
    </van-nav-bar>
    <div class="content">
      <div class="stip">
        <div>符合您的需求的有以下房源</div>
        <div @click="back">修改需求<van-icon name="arrow" /></div>
      </div>
      <van-tabs v-model="active" color="#45b7cd" title-active-color="#45b7cb">
        <van-tab title="二手房">
          <div v-show="houselist.length != 0">
            <div
              @click="jumptobuydetail(item.houseId, item)"
              v-for="(item, index) in houselist"
              :key="index"
              class="house"
            >
              <img :src="item.houseImage" />
              <div class="intrduce">
                <div class="title1">{{ item.subdistrict }}</div>
                <div class="title2">
                  <span>{{ item.houseType }}</span
                  >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                  >|<span>{{ item.floor }}</span>
                </div>
                <div class="tips">
                  <span v-show="item.aspectType">{{ item.aspectType }}</span>
                  <span v-show="item.decoration">{{ item.decoration }}</span>
                  <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
                </div>
                <div v-show="item.listedPrice != '面议'" class="title3">
                  {{ item.listedPrice }}万<span>
                    <span
                      >{{
                        ((item.listedPrice * 10000) / item.coveredArea).toFixed(
                          2
                        )
                      }} </span
                    >元/m<span class="up">2</span></span
                  >
                </div>
                <div v-show="item.listedPrice == '面议'" class="title3">
                  {{ item.listedPrice }}
                </div>
              </div>
            </div>
          </div>
          <div v-show="houselist.length == 0" class="nohouse">
            <img src="../../assets/nohouse.png" alt="" />
            <div>没有找到符合您需求的房源</div>
          </div>
        </van-tab>
        <van-tab title="新房">
          <div v-show="newhouselist.length == 0" class="nohouse">
            <img src="../../assets/nohouse.png" alt="" />
            <div>没有找到符合您需求的房源</div>
          </div>
        </van-tab>
      </van-tabs>
      <!-- <div class="stip">
        <div>近似房源</div>
        <div class="more">更多<van-icon name="arrow" /></div>
      </div>
      <div v-show="otherhouselist.length != 0" class="house">
        <img src="../../assets/logo.png" alt="" />
        <div class="intrduce">
          <span class="title1"
            >保利大都汇 精装套三 双卫带 衣帽间 业主装修没有住进</span
          >
          <span class="title2"
            ><span>70年</span>|<span>3室1厅</span>|<span>109m2</span></span
          >
          <div class="tips">
            <span>南北通透</span>
            <span>随时看房</span>
            <span>近学区</span>
          </div>
          <span class="title3">140万<span>12844.03元/m2</span></span>
        </div>
      </div>
      <div v-show="otherhouselist.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>没有找到符合您需求的房源</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getBuyhouselist } from "../../apis/house.js";
import local from "../../utils/local.js";
import { getHouseListBuy } from "@/utils/auth";
export default {
  data() {
    return {
      active: 0,
      sendval: {},
      houselist: [],
      newhouselist: [],
      otherhouselist: [],
      loading: false,
    };
  },
  created() {
    this.sendval = JSON.parse(local.get("buyserch"));
    this.sendval.currentPage = 1;
    this.sendval.perPage = 10;
    getBuyhouselist(this.sendval).then((res) => {
      if (res.result.list.length == 10) {
        this.loading = true;
      }
      this.houselist = res.result.list;
    });
    console.log(this.sendval);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jumptobuydetail(e, item) {
      let list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId == item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        if (local.get("citycode")) {
          getBuyhouselist(this.sendval).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.houselist = [...this.houselist, ...response.result.list];
          });
        } else {
          getBuyhouselist(this.sendval).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.houselist = [...this.houselist, ...response.result.list];
          });
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  z-index: 100000 !important;
}
.content {
  margin: 0 15px;
}
.stip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  div {
    &:first-child {
      font-size: 17px;
      font-weight: bold;
      color: #333;
    }
    &:last-child {
      font-size: 13px;
      color: #45b7cb;
      display: flex;
      align-items: center;
    }
  }
  .more {
    color: #666 !important;
  }
}
.house {
  background-color: #fff;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>